<template>
  <div>
    <v-dialog title="收款" :show.sync="dialogVisible" :destroy-on-close="true" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <div class="data-title">基本信息</div>
        <div>
          <span style="font-size: 16px ; text-blink: #000">物业名称{{form.projectName}}</span>
        </div>
        <el-form>
          <div class="info-list mb20">
            <dl>
              <dt>建筑面积</dt>
              <dd>{{form.lessorContract.buildingArea}}</dd>
            </dl>
            <dl>
              <dt>月租金(元)</dt>
              <dd>{{form.lessorContract.rentAmount}}</dd>
            </dl>
            <dl>
              <dt>合同期限</dt>
              <dd>{{form.lessorContract.startDate}}至{{form.lessorContract.endDate}}</dd>
              <dd>
                <el-button type="text" class="viewContract" @click.stop="showData(form)">查看合同</el-button>
              </dd>
            </dl>
            <dl>
              <dt>合同总金额(元)</dt>
              <dd>{{form.accumulatedAmountReceivedCount}}</dd>
            </dl>
            <dl>
              <dt>累计已收款金额(元)</dt>
              <dd>
                {{form.accumulatedAmountReceived}}
                <a
                  type="text"
                  style="margin-left: 120px;color: #1b68e8;cursor:pointer"
                  @click.stop="showpayableMoneyData(form)"
                >查看</a>
              </dd>
            </dl>
            <dl>
              <dt>累计剩余余款(元)</dt>
              <dd>{{form.accumulatedAmountReceivedCount-form.accumulatedAmountReceived}}</dd>
            </dl>
            <dl>
              <dt>付款人</dt>
              <dd>{{form.lessorContract.customerName}}</dd>
            </dl>
          </div>
        </el-form>
        <!--<div class="data-title">税率/级</div>
                <el-form >
                    <el-form-item label="税率：">
                        <el-checkbox-group style="display: inline-block" v-model="checkbox">
                            <el-checkbox v-for="(item,index) in taxesList" :key="index" :label="item.taxesName" v-if="item.taxesName != '城镇土地使用税'">
                                {{item.taxesName}}({{item.taxes}}%)
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item prop="TaxAmount" label="税级(城镇土地使用税)：">
                        <el-radio-group style="display: inline-block;width: 15%" v-model="radio" v-for="(item,index) in taxes" :key="index">
                            <el-radio :label="item" @change="radioChange($event, item, index)">{{index+1}}级({{item}}元)</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="税额(税额=税率*本次收款金额 + 税级)：">
                        <el-input :disabled="true" v-model="TaxExamples"></el-input>
                        <el-input :disabled="true" v-model="TaxAmount.toFixed(2)"></el-input>
                    </el-form-item>
        </el-form>-->
        <div class="data-title">收款信息</div>
        <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="本次应付款金额" prop="collectionAmount" disabled="disabled">
            <el-input disabled="disabled" v-model="form.amountOfReceivables"></el-input>
          </el-form-item>
          <el-form-item label prop="collectionAmount">
            <dl>
              <dt>收款费用周期</dt>
              <dd v-for="item in form.consolidatedCollectionFeeCycle" :key="item.value">{{item}}</dd>
            </dl>
          </el-form-item>
          <el-form-item label="本次收款金额(元)" prop="collectionAmount">
            <el-input disabled="disabled" v-model="form.amountOfReceivables"></el-input>
          </el-form-item>
          <el-form-item label="收款日期" prop="collectionDate">
            <el-date-picker v-model="form.collectionDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="税率更新时间"></el-date-picker>
          </el-form-item>

          <el-form-item label="收款备注" class="full" prop="collectionRemarks">
            <el-input v-model="form.collectionRemarks" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-throttle="[commit]">提 交</el-button>
      </span>
    </v-dialog>
    <contract-view ref="contractView"></contract-view>
    <show-receivable ref="showReceivable"></show-receivable>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { addObj, getConsolidatedCollection } from '@/views/wy-lessor/rentalSociety/api/finance-collection-actual'
import { getTaxesList } from '@/views/wy-lessor/rentalSociety/api/finance-manage-taxes'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import showReceivable from '../edit/show-receivable'
import contractView from "@/views/rent/contract/view.vue"
import { mapState } from 'vuex'
export default {
  mixins: [BaseLoad],
  components: { engineerList, showReceivable, contractView },
  data () {
    var validateCollectionAmount = (rule, value, callback) => {
      if (value > this.form.payableMoney) {
        callback(new Error('收款金额不能大于应付金额'));
      }
    }
    return {
      TaxAmount: 0,
      TaxExamples: '',
      sum: '',
      radio: '',
      Num: [],
      taxesIndex: '',
      taxesSumCheck: 0,
      taxesSumRadio: 0,
      checkbox: [],
      taxesList: [],
      taxes: [],
      formData: {},
      input: '',
      value: '',
      area: [],

      form: {
        lessorContract: {},
        accumulatedAmountReceived: '',
        accumulatedSurplus: '',
        amountOfReceivables: '',
        consolidatedCollectionFeeCycle: [],
        contractId: '',
        receivableId: '',
        taxes: '',
        taxAmount: '',
        collectionRemarks: '',
      },
      contractId: '',
      receivableId: '',
      dialogVisible: false,
      isEdit: false,
      rules: {
        // collectionAmount: [
        //     {required: true, message: '请输入本次收款金额', trigger: 'blur'},
        //     { validator: validateCollectionAmount, trigger: 'blur' }
        //     ],
        TaxAmount: [{ required: true, message: '请选择税级', trigger: 'blur' }],
        collectionDate: [{ required: true, message: '请输入收款日期', trigger: 'blur' }],
      },
      receivables: []
    }
  },
  methods: {
    // radioChange(value, item, index){
    //     this.taxesSumRadio = Number(value)
    //     this.taxesIndex = Number(index + 1) + '级'
    //     this.TaxAmount = Number((this.form.amountOfReceivables * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio)
    //     this.TaxExamples = this.sum + this.taxesIndex
    //     this.Num = this.receivables.reduce((total,item) => {
    //         return total.concat(Number((item * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio))
    //     },[])
    // },
    show (contractId, receivableId) {
      this.dialogVisible = true
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        if (receivableId) {
          this.isEdit = true
          //this.form = item
        }
        // getTaxesList("").then(resp => {
        //     this.taxesList = resp.data.data;
        //     this.taxes = this.taxesList[5].taxes.split(',')
        // })
        getConsolidatedCollection(contractId, receivableId).then(resp => {
          this.form = resp.data.data;
          this.receivables = resp.data.data.receivables
        })
        this.receivableId = receivableId.join(',')
        this.contractId = contractId

      }, 200)
    },
    //查看(累计已收款金额)
    showpayableMoneyData (item) {
      item.lessorContractId = this.contractId
      //console.log(item)
      this.$refs.showReceivable.show(item)
    },
    //查看合同
    showData (row) {
      this.$refs.contractView.show(this.contractId);
      //this.$router.push({path: "/wy-rent/contract/view?id=" + this.contractId});
    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          //if(this.radio != 0){
          this.form.taxes = this.TaxExamples
          this.form.taxAmount = this.TaxAmount
          this.form.receivableId = this.receivableId
          this.form.receivables = this.Num
          addObj(this.form).then(resp => {
            if (resp.data.data) {
              this.suc('添加成功')
              this.dialogVisible = false
              this.$emit('resetList')
            } else {
              this.err('添加失败')
            }
          })
          // }else{
          //     this.err('请选择税级')
          // }
        }
      })
    },
    handleCancel () {
      // this.radio = ''
      // this.checkbox = []
      // this.$nextTick(() => {
      //     this.TaxExamples = ''
      //     this.TaxAmount = 0
      // })
      this.dialogVisible = false
    },
    beforeClose (done) {
      done()
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();

@include info-list(3);
@include formWrap(3);
</style>
